{extend name="pc/common/_base" /}

{block name="title"}
<title>条形码生成-在线生成条形码工具-免费生成条形码-{$website['title']}</title>
{/block}

{block name="keywords"}
<meta name="keywords" content="条形码生成,在线生成条形码工具,免费生成条形码,条形码生成平台,{$website['title']}">
{/block}

{block name="description"}
<meta name="description" content="{$website['title']}条形码生成工具.">
{/block}

{block name="style"}
<style>
    .content-box {
        width: 100%;
        margin-top: 50px;
        margin-bottom: 100px;
    }

    #cbinputbox {
        width: 100%;
        margin: 0 auto 24px;
        position: relative;
        -webkit-box-shadow: 0 1px 3px #d5d6d9;
        display: flex;
    }

    #cbinputbox #param {
        flex: 1;
        height: 72px;
        outline: none;
        border: none;
        background-color: #fff;
        padding-left: 44px;
        font-size: 16px;
    }

    #cbinputbox #calbtn {
        width: 162px;
        height: 72px;
        background-color: #00b0fe;
        color: #fff;
        text-align: center;
        font-size: 24px;
        outline: none;
        border: none;
        cursor: pointer;
    }


    #cbresultbox {
        width: 100%;
        margin: 0 auto;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
    }

    #cbresultbox table tr {
        color: #777;
        display: flex;
    }

    #cbresultbox table th {
        width: 178px;
        border-bottom: 1px solid #d5d6d9;
        border-radius: 3px;
        text-align: center;
        background-color: #fff;
        line-height: 80px;
        float: left;
    }

    #cbresultbox table td {
        flex: 1;
        border-bottom: 1px solid #d5d6d9;
        border-radius: 3px;
        position: relative;
        background-color: #fff;
        margin-left: 4px;
        float: left;
        padding-left: 21px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #cbresultbox table td strong {
        width: 80px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        border: 1px solid #a4e2fe;
        color: #38bafe;
        border-radius: 16px;
        background-color: #dff4fe;
        margin-right: 24px;
    }

    #cbresultbox table td input {
        flex: 1;
        color: #333;
        border: none;
        position: relative;
        margin: 0;
        height: 30px;
    }
</style>
{/block}

{block name="main"}

<div class="editer">

    <div class="container">

        <h1 class="editer-title">Bar Code</h1>
        <p class="editer-info">在线生成条形码</p>

        <div class="content-box">

            <div id="app" v-cloak>

                <div id="cbinputbox">
                    <input id="param" type="text" name="param" placeholder="在这里输入条形码内容" v-model="text" @input="doBarcode()"><input type="button" id="calbtn" value="生 成" @click="doBarcode()"><span id="del"></span>
                </div>

                <div id="cbresultbox">
                    <table>
                        <tbody>
                        <tr>
                            <th>CODE128</th>
                            <td class="flex-center">
                                <div class="img-box">
                                    <svg id="barcode"></svg>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th style="border-bottom: none;">CODE39</th>
                            <td class="flex-center" style="border-bottom: none;">
                                <div class="img-box">
                                    <svg id="barcode2"></svg>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>

        </div>

        <div class="recommend-box">
            {include file='pc/common/app'}
        </div>
    </div>
</div>


{/block}

{block name="script"}
<script>
    require(['vue', 'barcode'], (Vue, Barcode) => {
        new Vue({
            el: '#app',
            data: {
                text: '',
            },
            mounted() {
                this.doBarcode();
            },
            methods: {
                doBarcode() {
                    // 文档 https://lindell.me/JsBarcode/
                    // https://blog.csdn.net/qq_17627195/article/details/127287540

                    let text = this.text ? this.text : 'HeQing';

                    JsBarcode("#barcode", text);

                    JsBarcode("#barcode2", text, {
                        format: "CODE39",
                        lineColor: "#000",
                        width: 2,
                        height: 50,
                        displayValue: true
                    });
                }
            }
        });
    });
</script>
{/block}